import React from 'react';

import { Breadcrumb } from 'antd';

import { useAppSelector } from '@store/hooks';
import { getMenu } from '@store/reducers/leftSiderSlice';
import { getOption } from '@store/reducers/breadSlice';
import { useLocation } from 'react-router-dom';

function BreadEle(props: any) {
    const option = useAppSelector(getOption);
    let { hidden } = option;
    let breadItemArr: JSX.Element[] = [];
    const location = useLocation();
    const menu = useAppSelector(getMenu);
    let pathname = location.pathname;
    let pathArr = pathname.split('/');
    pathArr.shift();
    let menuItem: RouterItem[] = menu;
    let path: string = '';
    pathArr.forEach((s) => {
        path = `${path}/${s}`;
        for (let i = 0; i < menuItem.length; i++) {
            let item = menuItem[i];
            if (path === item.path) {
                menuItem = item.children || [];
                let breadItem: JSX.Element = <Breadcrumb.Item key={item.path}>{item.title}</Breadcrumb.Item>;
                breadItemArr.push(breadItem);
                break;
            }
        }
    });

    if (hidden) {
        return <div style={{ width: '0', height: 0, display: 'none' }}></div>;
    }
    return (
        <Breadcrumb style={{ padding: '5px 24px', height: '33px', background: '#fff', borderBottom: '1px solid #eee' }}>
            {breadItemArr}
        </Breadcrumb>
    );
}

export default BreadEle;
